Yui button inspired style #10061

scherler · 2024-12-16T11:34:38Z

Testing done

.jenkins-button--outline
.jenkins-button--outline (on hover)

Proposed changelog entries

human-readable text

Proposed upgrade guidelines

N/A

Submitter checklist

Give feedback

The Jira issue, if it exists, is well-described.
The changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developers, depending on the change) and are in the imperative mood (see examples). Fill in the Proposed upgrade guidelines section only if there are breaking changes or changes that may require extra steps from users during upgrade.
There is automated testing or an explanation as to why this change has no tests.
New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadocs, as appropriate.
New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO"), if applicable.
New or substantially changed JavaScript is not defined inline and does not call eval to ease future introduction of Content Security Policy (CSP) directives (see documentation).
For dependency updates, there are links to external changelogs and, if possible, full differentials.
For new APIs and extension points, there is a link to at least one consumer.
Options

Desired reviewers

@mention

Before the changes are marked as ready-for-merge:

Maintainer checklist

Give feedback

There are at least two (2) approvals for the pull request and no outstanding requests for change.
Conversations in the pull request are over, or it is explicit that a reviewer is not blocking the change.
Changelog entries in the pull request title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood.
Proper changelog labels are set so that the changelog can be generated automatically.
If the change needs additional upgrade steps from users, the upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the pull request title (see example).
If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).
Options

Signed-off-by: Thorsten Scherler <[email protected]>

janfaracik · 2024-12-16T11:44:32Z

Heyo. The existing classes for Button should work for your primary/destructive use cases - see https://weekly.ci.jenkins.io/design-library/Buttons/

e.g. jenkins-button jenkins-button--primary jenkins-!-destructive-color and jenkins-button jenkins-button--primary jenkins-!-success-color

You'd want to add an 'outline' modifier though for the 'Analyse now' button, e.g. jenkins-button jenkins-button--outline unless the default button styling could work instead?

Signed-off-by: Thorsten Scherler <[email protected]>

scherler · 2024-12-16T12:00:41Z

@janfaracik makes a lot of sense and thanks for pointing it out (I will follow up with a sample in the design-lib) I renamed the outline example

scherler · 2024-12-16T12:16:29Z

jenkinsci/design-library-plugin#360

janfaracik · 2024-12-18T19:02:44Z

src/main/scss/components/_buttons.scss

@@ -75,6 +75,35 @@
  }
 }

+.jenkins-button--outline {
+  color: var(--btn-secondary-color) !important;


--btn-* vars are deprecated (YUI only), would just use var(--text-color) if it needs to be set.

janfaracik · 2024-12-18T19:02:59Z

src/main/scss/components/_buttons.scss

+.jenkins-button--outline {
+  color: var(--btn-secondary-color) !important;
+  border: 2px solid var(--btn-secondary-border);
+  font-weight: bold;


These props could be inherited from the base jenkins-button class.

Well but the original yui outline button had been bold, but if you want we can change it but IMHO it makes more sense bold.

vs

janfaracik · 2024-12-18T19:03:21Z

src/main/scss/components/_buttons.scss

+
+  &:not(:disabled) {
+    &:hover {
+      border: 2px solid var(--accent-color) !important;


This wouldn't work if paired with colour modifiers. We've been using currentColor in our other button modifiers to inherit the colour from modifiers.

hmm are you sure

however I added jenkins-button--outline[class*="color"]

jenkins-button jenkins-button--outline jenkins-!-success-color

:hover

Heya, I'm travelling today but I'll take a look as soon as I can :)

good traveling and MCAAHNY

Thanks, hope you had a good time too :)

.jenkins-button--outline { color: var(--color, var(--text-color-secondary)) !important; --button-background--hover: color-mix(in srgb, var(--color, var(--text-color-secondary)) 15%, transparent); --button-background--active: color-mix(in srgb, var(--color, var(--text-color-secondary)) 20%, transparent); --button-box-shadow--focus: color-mix(in srgb, var(--color, var(--text-color-secondary)) 10%, transparent); &::before { background: transparent; border: 2px solid var(--color, var(--text-color-secondary)); opacity: 1 !important; } &:hover { &::before { background: var(--button-background--hover) !important; } } &:active { &::before { background: var(--button-background--active) !important; } } } .jenkins-button[class*="color"] { background: transparent; color: var(--color) !important; &::before { --button-background: currentColor; // changed this opacity: 0.1; }

How is something like this? The buttons styling is a little confusing (and more complex than it needs to be as modern CSS wasn't available when it was originally written, I do wanna tidy up this file)

I’m not totally sure about adding an outline button to core - I feel our default/secondary style already covers the same ground. Any thoughts on using it as a local class, using a prefix like {plugin-name}- instead of jenkins-?

Any thoughts @jenkinsci/sig-ux ?

Signed-off-by: Thorsten Scherler <[email protected]>

…ns into yui_button_inspired_style

Signed-off-by: Thorsten Scherler <[email protected]>

A1exKH

@scherler LGTM.

krisstern · 2024-12-31T13:09:29Z

I’m not totally sure about adding an outline button to core - I feel our default/secondary style already covers the same ground. Any thoughts on using it as a local class, using a prefix like {plugin-name}- instead of jenkins-?

I tend to agree that we should use the outline button as a local class instead of core.

uhafner · 2024-12-31T14:53:11Z

I’m not totally sure about adding an outline button to core - I feel our default/secondary style already covers the same ground. Any thoughts on using it as a local class, using a prefix like {plugin-name}- instead of jenkins-?

I tend to agree that we should use the outline button as a local class instead of core.

I also think that having too many styling options will confuse plugin authors and users. I think all existing styles have a semantic meaning now (default, secondary, destructive), and if the new style has no semantic meaning then we should not add it.

What is the reason for adding this new style? Or why does one of the existing buttons do not work? In jenkinsci/warnings-ng-plugin#1912 we also replaced the deprecated outlined YUI button with the Jenkins secondary button style which works quire well.

Signed-off-by: Thorsten Scherler <[email protected]>

scherler · 2025-01-20T09:29:07Z

I implemented the suggested modifications @janfaracik (I had to adopt them a bit). I will not die on the hill saying we need to have it; however, it is a nice addition and a one-to-one replacement of the YUI button we had until now. I understand that using the default or another is acceptable, but not the same as the default.

timja · 2025-01-20T09:57:32Z

I implemented the suggested modifications @janfaracik (I had to adopt them a bit). I will not die on the hill saying we need to have it; however, it is a nice addition and a one-to-one replacement of the YUI button we had until now. I understand that using the default or another is acceptable, but not the same as the default.

Can you demonstrate how the existing buttons don't work for you please? i.e. could you add the existing buttons and we can see what it looks like / where any improvements could be made?

We've dropped YUI and having a one-to-one replacement with the same look and feel is not a design goal.

scherler · 2025-01-20T13:01:06Z

To give an example of the different look and feel I attach some screen shots form our product and some OS plugins

before

after

or e.g. the OS plugins jenkinsci/copyartifact-plugin#246

...as said, this PR is a nice to have and I would love the outlined buttons only but in all my drop yui prs I did not used it.

daniel-beck · 2025-01-20T13:17:51Z

I don't get this reason.

Yes, buttons look different now. This is intentional. There's nothing special about the forms you're showing here compared to elsewhere in Jenkins. In particular, you haven't demonstrated why the new buttons wouldn't work, and a different, second button style is needed. #10061 (comment) remains unanswered.

(FWIW I don't like the new buttons either and think the outline buttons look nicer, but that would be motivation for changing all buttons, or at least secondary ones, back to the outline style, not introducing a second style with no semantic meaning.)

scherler added 2 commits December 16, 2024 12:26

[yui_button_inspired_style] add button yui styled

18d825a

Signed-off-by: Thorsten Scherler <[email protected]>

[yui_button_inspired_style] formating change

72a6662

Signed-off-by: Thorsten Scherler <[email protected]>

scherler mentioned this pull request Dec 16, 2024

[border_css_util] implement css helper class #10057

Open

scherler added 2 commits December 16, 2024 12:47

[yui_button_inspired_style] remove extra radius

f95810f

Signed-off-by: Thorsten Scherler <[email protected]>

[yui_button_inspired_style] online add one new

2c5f287

Signed-off-by: Thorsten Scherler <[email protected]>

scherler added 2 commits December 16, 2024 18:27

Merge branch 'master' into yui_button_inspired_style

186d079

Merge branch 'master' into yui_button_inspired_style

d823c78

timja added web-ui The PR includes WebUI changes which may need special expertise rfe For changelog: Minor enhancement. use `major-rfe` for changes to be highlighted labels Dec 17, 2024

timja requested a review from janfaracik December 17, 2024 14:05

janfaracik reviewed Dec 18, 2024

View reviewed changes

scherler mentioned this pull request Dec 19, 2024

drop yui button jenkinsci/copyartifact-plugin#246

Merged

6 tasks

scherler added 4 commits December 20, 2024 11:26

[yui_button_inspired_style] add color specific outline support

6188712

Signed-off-by: Thorsten Scherler <[email protected]>

Merge branch 'yui_button_inspired_style' of github.com:scherler/jenki…

c41c2bb

…ns into yui_button_inspired_style

[yui_button_inspired_style] lint fix

b41d99f

Signed-off-by: Thorsten Scherler <[email protected]>

Merge branch 'master' into yui_button_inspired_style

80665d4

scherler requested a review from janfaracik December 20, 2024 11:23

A1exKH approved these changes Dec 25, 2024

View reviewed changes

scherler added 5 commits January 2, 2025 10:58

Merge branch 'master' into yui_button_inspired_style

5f83efb

Merge branch 'master' into yui_button_inspired_style

d019b4e

Merge branch 'master' into yui_button_inspired_style

5ebe1c8

[yui_button_inspired_style] implement suggestion

17d4cd8

Signed-off-by: Thorsten Scherler <[email protected]>

[yui_button_inspired_style] fix code

005517a

Signed-off-by: Thorsten Scherler <[email protected]>

daniel-beck added the needs-justification This PR lacks a motivation for the proposed change. label Jan 17, 2025

scherler added 2 commits January 20, 2025 10:22

[yui_button_inspired_style] fix code

2bdb0bd

Signed-off-by: Thorsten Scherler <[email protected]>

Merge branch 'master' into yui_button_inspired_style

a67cee3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Yui button inspired style #10061

Yui button inspired style #10061

scherler commented Dec 16, 2024 •

edited

Loading

Submitter checklist

Maintainer checklist

janfaracik commented Dec 16, 2024

scherler commented Dec 16, 2024

scherler commented Dec 16, 2024

janfaracik Dec 18, 2024

janfaracik Dec 18, 2024

scherler Dec 20, 2024

janfaracik Dec 18, 2024 •

edited

Loading

scherler Dec 20, 2024

scherler Dec 20, 2024

scherler Dec 20, 2024

janfaracik Dec 20, 2024

scherler Dec 20, 2024

janfaracik Dec 31, 2024

A1exKH left a comment

krisstern commented Dec 31, 2024

uhafner commented Dec 31, 2024

scherler commented Jan 20, 2025

timja commented Jan 20, 2025

scherler commented Jan 20, 2025

daniel-beck commented Jan 20, 2025

Yui button inspired style #10061

Are you sure you want to change the base?

Yui button inspired style #10061

Conversation

scherler commented Dec 16, 2024 • edited Loading

Testing done

Proposed changelog entries

Proposed upgrade guidelines

Submitter checklist

Desired reviewers

Maintainer checklist

janfaracik commented Dec 16, 2024

scherler commented Dec 16, 2024

scherler commented Dec 16, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

janfaracik Dec 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

A1exKH left a comment

Choose a reason for hiding this comment

krisstern commented Dec 31, 2024

uhafner commented Dec 31, 2024

scherler commented Jan 20, 2025

timja commented Jan 20, 2025

scherler commented Jan 20, 2025

daniel-beck commented Jan 20, 2025

scherler commented Dec 16, 2024 •

edited

Loading

janfaracik Dec 18, 2024 •

edited

Loading